html {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
:root {
  --border: calc(1vmin / 4);
  --sine-ease: curbic-bezier(0.37, 0, 0.63, 1);
  --dur: 4s;
  --size: 40vmin;
  --gap: 4vmin;
}

body {
  overflow: hidden;
  background-color: #fcecc9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);
}

.grid {
  position: relative;
  display: grid;
  grid-template:
    "c y" auto
    "x b" auto
    / auto auto;
  gap: var(--gap);
  animation: var(--dur) var(--sine-ease) calc(-0.5 * var(--dur)) infinite
      alternate x,
    var(--dur) var(--sine-ease) infinite alternate y,
    calc(var(--dur) * 2) linear infinite rot;
  .circle {
    --color: rgb(123, 0, 126);
    --top: var(--y);
    --left: var(--x);
    grid-area: c;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: var(--color);
    border: var(--border) solid var(--color);
    &::after {
      width: var(--border);
      height: calc(var(--size) / 2);
      background-color: #fcecc9;
      margin-left: calc(var(--border) / -2);
      left: 50%;
      top: 0;
      transform-origin: 50% 100%;
      transform: rotate(calc(var(--rot) * 1turn));
    }
  }
  .x-bar {
    --color: rgb(126, 178, 221);
    --dim: var(--y);
    --top: 50%;
    --left: var(--x);
    grid-area: x;
    width: var(--size);
    height: var(--border);
    background-color: var(--color);
    &::after {
      left: var(--x);
      bottom: 0;
      height: var(--length);
      width: var(--width);
      transform: translate(-50%, 0);
    }
  }
  .x-wave {
    grid-area: x;
    top: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 2' preserveAspectRatio='none'><path fill='rgb(126, 178, 221)' d='M 0 0 C 0 .37, 1 .63, 1 1 C 1 1.37, 0 1.63, 0 2 Z'></path></svg>");
    background-size: 100% 200%;
    background-position: top
      calc(var(--size) * 0.5 + (var(--rot) * 2 * var(--size))) center;
    background-repeat: repeat-y;
    border-radius: 0 0 calc(var(--size) * 0.125) calc(var(--size) * 0.125);
  }
  .y-bar {
    --color: rgb(249, 57, 67);
    --dim: var(--x);
    --top: var(--y);
    --left: 50%;
    grid-area: y;
    width: var(--border);
    height: var(--size);
    background-color: var(--color);
    &::after {
      top: var(--y);
      right: 50%;
      width: var(--length);
      height: var(--width);
      transform: translate(0, -50%);
    }
  }
  .y-wave {
    grid-area: y;
    left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'><path fill='rgb(249, 57, 67)' d='M 0 0 C .37 0, .63 1, 1 1 C 1.37 1, 1.63 0, 2 0 Z'></path></svg>");
    background-size: 200% 100%;
    background-position: center left calc(var(--rot) * 2 * var(--size));
    background-repeat: repeat-x;
    border-radius: 0 calc(var(--size) * 0.125) calc(var(--size) * 0.125) 0;
  }

  .circle,
  .x-bar,
  .y-bar {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: var(--top);
      left: var(--left);
      height: calc(var(--size) / 32);
      width: calc(var(--size) / 32);
      background-color: #fcecc9;
      border: var(--border) solid var(--color);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    &::after {
      position: absolute;
      content: "";
    }
  }
  .x-bar,
  .y-bar {
    --length: calc(var(--gap)+ ((1 - var(--dim)) * var(--size)));
    --width: var(--border);
    &::after {
      background-color: var(--color);
    }
  }
  .x-wave,
  .y-wave,
  .xy-wave {
    position: relative;
    width: var(--size);
    height: var(--size);
  }
}

@keyframes x {
  from {
    --x: 0%;
  }
  to {
    --x: 100%;
  }
}

@keyframes y {
  from {
    --y: 0%;
  }
  to {
    --y: 100%;
  }
}

@keyframes rot {
  from {
    --rot: 0%;
  }
  to {
    --rot: 100%;
  }
}
@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --rot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
